<script setup>
import { inject, onMounted, ref } from 'vue'
import Image1 from '../assets/png/img/user.jpg' // 确保图片路径正确
import Image2 from '../assets/png/img/balance.png' // 确保图片路径正确
import Image3 from '../assets/png/img/warning.png' // 确保图片路径正确
import mov1 from '../assets/png/img/move.png' // 确保图片路径正确
import mov2 from '../assets/png/img/move2.png' // 确保图片路径正确
import yzImage from '../assets/png/img/yz.png' // 确保图片路径正确
import { onBeforeRouteLeave } from 'vue-router'
const allList = ref([
  {
    title: '人脸识别摄像头',
    num: '8',
    url: Image1
  },
  {
    title: '可控制摄像头',
    num: '20',
    url: Image2
  },
  {
    title: '故障摄像头',
    num: '2',
    url: Image3
  }
])
const value = ref(1)
const list = ref([
  {
    title: '监控1:大西门云台',
    time: '07:12:18',
    type: '待派遣'
  },
  {
    title: '监控2:A楼南侧',
    time: '07:13:12',
    type: '处理中'
  },
  {
    title: '监控3:T9北侧',
    time: '08.12 18',
    type: '已消警'
  },
  {
    title: '监控4:大西门云台',
    time: '07:12:18',
    type: '待派遣'
  },
  {
    title: '监控5:A楼南侧',
    time: '07:13:12',
    type: '处理中'
  },
  {
    title: '监控6:T9北侧',
    time: '08:12:18',
    type: '已消警'
  },
  {
    title: '监控7:大西门云台',
    time: '07:12:18',
    type: '待派遣'
  },
  {
    title: '监控8:A楼南侧',
    time: '07:13:12',
    type: '处理中'
  },
  {
    title: '监控9:T9北们',
    time: '08:12:18',
    type: '已消警'
  }
])
const moveList = ref([
  {
    title: '星关广场云台',
    url: mov1
  },
  {
    title: '底商北侧',
    url: mov1
  },
  {
    title: '后山艺术空间',
    url: mov1
  },
  {
    title: 'T9后面',
    url: mov2
  },
  {
    title: '门口',
    url: mov2
  },
  {
    title: 'T9北侧',
    url: mov2
  },
  {
    title: 'T9北侧',
    url: mov2
  },
  {
    title: 'T9北侧',
    url: mov2
  },
  {
    title: 'T9北侧',
    url: mov2
  }
])
const camera_round = ref(null)
let echarts = inject('echarts')
var myChartPie
//指定饼图
let optionPie = {
  title: [
    {
      text: '覆盖区域',
      textStyle: { fontSize: '14px', color: '#4a80a2' },
      top: '40%',
      left: '48%',
      textAlign: 'center'
    },
    {
      text: '80%',
      textStyle: { fontSize: '14px', color: '#27d9c8' },
      top: '55%',
      left: '48%',
      textAlign: 'center'
    }
  ],
  series: [
    {
      type: 'pie',
      // : 130, // 45度倾斜
      startAngle: 40,
      radius: ['65%', '100%'],
      center: ['50%', '50%'],
      data: [
        {
          value: 130,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                { offset: 0, color: '#2b6480' }, // 渐变起始色
                { offset: 0.5, color: '#2adfcd' }, // 渐变结束色
                { offset: 1, color: '#2b6480' } // 渐变结束色
              ]
            }
          }
        },
        { value: 50, itemStyle: { color: 'transparent' } } // 透明部分
      ],
      label: {
        show: false // 不显示标签
      }
    }
  ]
}
onMounted(() => {
  myChartPie = echarts.init(camera_round.value)
  myChartPie.setOption(optionPie)
  window.addEventListener('resize', function () {
    myChartPie.resize()
  })
})
const scale = inject('scale')
const leave = ref(false)
onBeforeRouteLeave((to, from, next) => {
  leave.value = true
  setTimeout(() => {
    next()
  }, 200)
})
</script>
<template>
  <div class="security_layout">
    <div
      class="left pl"
      :class="{ 'slide-in-left-leave': leave, 'slide-in-left': !leave }"
      :style="{ '--scale-factor': scale }"
    >
      <div class="all shadow">
        <div class="title">
          <img class="image" src="../assets/png/img/titleImg.png" mode="" />
          <div>摄像头概述总览</div>
        </div>
        <div class="item_1">
          <img class="image" src="../assets/png/img/title.png" mode="" />
          <div class="text">
            <span class="s1">摄像头总数量</span>
            <span class="s2">53</span>
          </div>
        </div>
        <div class="item_2">
          <div class="item_2_t" v-for="(item, index) in allList" :key="index">
            <div class="text">
              <img class="img" :src="item.url" alt="" />
              <div class="title">{{ item.title }}</div>
            </div>
            <div style="color: #9dcef3; font-size: 0.175rem">{{ item.num }}</div>
          </div>
        </div>
      </div>
      <div class="proportion shadow">
        <div class="title">
          <img class="image" src="../assets/png/img/titleImg.png" mode="" />
          <div>摄像头覆盖占比</div>
        </div>
        <div class="content">
          <div class="left">
            <div ref="camera_round" id="camera_round"></div>
          </div>
          <div class="right">
            <div class="item_1">
              覆盖区域显示
              <el-switch
                style="
                  margin-left: 7px;
                  --el-switch-on-color: #32375f;
                  --el-switch-off-color: #32375f;
                "
                v-model="value"
              />
            </div>
            <div class="item_2">人脸识别区域：32%</div>
            <div class="item_3">32%</div>
            <div class="item_4">可控摄像头区域：53.685%</div>
            <div class="item_5">53.685%</div>
          </div>
        </div>
      </div>
      <div class="list shadow">
        <div class="title">
          <img class="image" src="../assets/png/img/titleImg.png" mode="" />
          <div>报警信息列表</div>
        </div>
        <div class="content">
          <div class="item" v-for="(item, index) in list" :key="index">
            <div class="left"></div>
            <div class="right">
              <div class="ct_1">
                <span>{{ item.title }}</span>
                <span
                  class="span"
                  style="color: #fff"
                  :class="{ b_1: item.type == '处理中', b_2: item.type == '已消警' }"
                  >{{ item.type }}</span
                >
              </div>
              <div class="ct_2">{{ item.time }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="right pr shadow"
      :class="{ 'slide-in-right-leave': leave, 'slide-in-right': !leave }"
      :style="{ '--scale-factor': scale }"
    >
      <div class="title">
        <img class="image" src="../assets/png/img/titleImg.png" mode="" />
        <div>摄像头概述总览</div>
      </div>
      <div class="content">
        <div
          class="item"
          v-for="(item, index) in moveList"
          :key="index"
          :class="{ ml: (index + 1) % 2 == 0 }"
        >
          <img class="img" :src="item.url" alt="" />
          <div class="text">{{ item.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url('@/assets/scss/Security.scss');
@import url('@/assets/scss/common.scss');
.ml {
  margin-left: 0.175rem !important;
}
#camera_round {
  width: 1.25rem;
  height: 1.25rem;
}
</style>
